<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 21:48:26
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:52:05
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" style="height: 95%"></div>
</template>
<script>
// 引入折线图构造函数
import { DualAxes } from '@antv/g2plot';
export default {
  data() {
      return {
       dataArr: [
        { time: "8:00", temperature: -4, humidity:98 },
        { time: "9:00", temperature: -2, humidity:96 },
        { time: "10:00", temperature: 1, humidity:93 },
        { time: "11:00", temperature: 2, humidity:93 },
        { time: "12:00", temperature: 3, humidity:92 },
        { time: "13:00", temperature: 4, humidity:91 },
        { time: "14:00", temperature: 4, humidity:91 },
        { time: "15:00", temperature: 5, humidity:90 },
        { time: "16:00", temperature: 4, humidity:91 },
        { time: "17:00", temperature: 3, humidity:92 },
        { time: "18:00", temperature: 1, humidity:95 },
        { time: "19:00", temperature: 1, humidity:95 },
        { time: "20:00", temperature: 0, humidity:94 }
        ]
      }
  },
  mounted() {
   this.initChart()
  },
  methods: {
    initChart() {
      const dualAxes = new DualAxes(this.$refs.left1_container, {
        data: [this.dataArr,this.dataArr],
        xField: 'time',
        yField: ['temperature', 'humidity'],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
          }]
      })
      dualAxes.render();
    },
  },
};
</script>
<style scoped>

</style>
